<template>
	<view class="" :class="themeName">
		<custom-navbar title="佣金明细" :percent="percent" is-back navigation-style="default">
			<template slot="right">
				<view  style="padding: 20rpx;" @click="clickHandler">
					<u-icon name="list" size="40" bold></u-icon>
				</view>
			</template>
		</custom-navbar>
		
		
		<!-- <view style="background: red; height: 10000rpx;"></view> -->
		
		
		<u-popup v-model="visible" mode="bottom" height="400rpx">
			<view>
				人生若只如初见，何事秋风悲画扇
			</view>
		</u-popup>
		
		<!-- <u-calendar v-model="false" mode="range" @change="changeQueryDate" safe-area-inset-bottom></u-calendar> -->
		
		
		


		<mescroll-uni ref="mescrollRef" bgColor="white" top="100rpx" @init="mescrollInit" :down="downOption"
			:up="upOption" @down="downCallback" @up="upCallback">
			<view class="list mt20" v-if="lists.length !== 0">
				<view v-for="(item, index) in lists" :key="index" class="item">
					<view class="bill-list bg-white">
						<view class="bill-item flex row-between">
							<view>
								<view class="black mb10">{{ item.type_desc }}</view>
								<view class="xs muted">{{ item.create_time }}</view>
							</view>
							<view class="lg" :class="{
                  income: item.change_amount_desc[0] == '+' ? false : true,
                }">{{ item.change_amount_desc }}</view>
						</view>
					</view>
				</view>
			</view>
		</mescroll-uni>
	</view>
</template>

<script>
	// +----------------------------------------------------------------------
	// | LikeShop100%开源免费商用电商系统
	// +----------------------------------------------------------------------
	// | 欢迎阅读学习系统程序代码，建议反馈是我们前进的动力
	// | 开源版本可自由商用，可去除界面版权logo
	// | 商业版本务必购买商业授权，以免引起法律纠纷
	// | 禁止对系统程序代码以任何目的，任何形式的再发布
	// | Gitee下载：https://gitee.com/likeshop_gitee/likeshop
	// | 访问官网：https://www.likemarket.net
	// | 访问社区：https://home.likemarket.net
	// | 访问手册：http://doc.likemarket.net
	// | 微信公众号：好象科技
	// | 好象科技开发团队 版权所有 拥有最终解释权
	// +----------------------------------------------------------------------
	// | Author: LikeShopTeam
	// +----------------------------------------------------------------------
	import {
		userBill,
		redBalanceBill
	} from "@/api/user";
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	import MescrollMoreItemMixin from "@/components/mescroll-uni/mixins/mescroll-more-item.js";
	export default {
		mixins: [MescrollMixin, MescrollMoreItemMixin],
		data() {
			
			return {
				percent: 0,
				list: [{
						tabsName: "全部",
						isShow: true,
						type: "user_money",
					},
					{
						tabsName: "支出",
						isShow: false,
						type: "dec",
					},
					{
						tabsName: "收入",
						isShow: false,
						type: "inc",
					},
				],
				current: 0,
				lists: [],

				downOption: {
					auto: false, // 不自动加载 (mixin已处理第一个tab触发downCallback)
				},
				upOption: {
					auto: true, // 不自动加载
					noMoreSize: 4, //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
					empty: {
						icon: "/static/images/empty/order.png",
						tip: "暂无账户明细", // 提示
						fixed: true,
						top: "200rpx",
					},
				},
				visible: false,
				range_time: '',
				type: ''
			};
		},
		onLoad(options) {
			this.type = options.type;
		},
		computed: {
			
		},
		onPageScroll(e) {
			const top = uni.upx2px(100)
			const {
				scrollTop
			} = e
			this.percent = scrollTop / top > 1 ? 1 : scrollTop / top
		},
		methods: {
			change(index) {
				for (let i = 0; i < this.list.length; i++) {
					this.list[i].isShow = false;
				}
				this.current = index;
				this.upCallback({
					num: 1,
					size: 10,
				});
				this.list[index].isShow = true;
			},

			upCallback(page) {
				let num = page.num;
				let size = (page.size += 5);
				
				let action = '';
				if(this.current == 1) {
					action = 'dec';
				} else if(this.current == 2) {
					action = 'inc';
				}
				
				userBill({
						type: this.type,
						action: action,
						page_no: num,
						page_size: size,
						range_time: this.range_time 
					})
					.then((res) => {
						if (page.num == 1) this.lists = []; //如果是第一页需手动置空列表
						this.lists = this.lists.concat(res.lists); //追加新数据
						this.mescroll.endBySize(res.lists.length, res.count);
					})
					.catch((err) => {
						this.mescroll.endBySize();
					});
			},
			clickHandler() {
				this.visible = true
			},
			
			
			changeQueryDate(e) {
				this.range_time = `${e.startDate} - ${e.endDate}`
				this.upCallback({
					num: 1,
					size: 10,
				});
			}
		},

		onShow() {},
	};
</script>
<style lang="scss" scoped>
	uni-page-body {
		height: 100vh;
	}
	.nav-bar {
		display: flex;
		flex-direction: row;
		align-items: center;
		background-color: #ffffff;
	}
	.u-tabs {
		flex: 1;
	}
	.list {
		.item {
			.time {
				padding: 30rpx;
			}

			.bill-list {
				.bill-item {
					padding: 20rpx 30rpx;

					// border-bottom: $-solid-border;
					.income {
						color: red;
					}
				}
			}
		}
	}
</style>